<template>
  <div class="relationq">
    <div class="ask">
      <div class="header">
        <i
          class="el-icon-refresh"
          style="font-size: large; margin-right: 10px"
        />
        关联关系推理
      </div>
      <div class="input">
        <el-input
          placeholder="source实体名称"
          v-model="source"
          clearable
          style="width: 30%;margin-right: 20px;"
        />
        <el-select
          v-model="relation"
          placeholder="关系"
          clearable=""
          style="margin: 0 30px; width: 20%"
        >
          <el-option
            v-for="item in relationNames"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
        <el-input
          placeholder="target实体名称"
          v-model="target"
          clearable
          style="width: 30%; margin-right: 20px"
        />
        <el-button
          type="primary"
          plain
          @click="relationQuerySearch()"
          
        >开始推理</el-button>
      </div>
    </div>
    <div class="graph" v-if="this.showTable===false" >
      <div class="header" >关系图</div>
      <div class="show">
        <GraphBoard ref="relationQueryBoard" />
      </div>
    </div>
    <div class="graph" v-if="this.showTable===true">
      <div class="header">关系预测</div>
      <div class="show">
        <el-table
          :data="this.tableData"
          border
          height="340"
          style="width: 100%">
          <el-table-column
            prop="nodeIdP1"
            label="节点1 Id"
            width="180">
          </el-table-column>
          <el-table-column
            prop="nameP1"
            label="节点1"
            width="180">
          </el-table-column>
          <el-table-column
            prop="nodeIdP2"
            label="节点2 Id"
            width="180">
          </el-table-column>
          <el-table-column
            prop="nameP2"
            label="节点2"
            width="180">
          </el-table-column>
          <el-table-column
          prop="name"
            label="关系名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="score"
            label="预测分数"
            width="180">
          </el-table-column>
          <el-table-column
            
            label="审核人"
            width="180">
          </el-table-column>
          <el-table-column
            
            label="操作">
            <template slot-scope="scope">
              <el-button  @click="handleCheck(scope.row)" type="text" size="small">审核</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      title="设置关系类型"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="source节点">
          <el-input v-model="form.nameP1" readonly></el-input>
        </el-form-item>
        <el-form-item label="target节点">
          <el-input v-model="form.nameP1" readonly></el-input>
        </el-form-item>
        <el-form-item label="关系名称" prop="relationName">
          <el-input v-model="form.name" placeholder="请输入关系名称"></el-input>
        </el-form-item>
        <el-form-item label="关系权重" prop="value">
          <el-input placeholder="1~20" v-model="form.width"></el-input>
        </el-form-item>
      </el-form>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit(form)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
  
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import GraphBoard from '../../graph/components/GraphBoard'

export default {
  name: 'RelationQuery',
  components: {
    GraphBoard,
  },
  data() {
    return {
      graphData: null,
      source: '',
      target: '',
      relation: '',
      showTable: false,
      tableData:[],
      dialogVisible: false,
      form: [],
      type: 'link',
      copySign: false,
      isCheck: false,
      rules: {
        relationName: [{required: true, message: '关系名称为必填项'}],
        value: [{required: true, message: '关系权重为必填项'}]
      },
      projectId: 0
      
      // options: [
      //   {
      //     label: '主食材',
      //     relation: '主食材',
      //   },
      //   {
      //     label: '辅料',
      //     relation: '辅料',
      //   },
      //   {
      //     label: '属于',
      //     relation: '属于',
      //   },
      // ],
    }
  },
  mounted() {
    // const projectId = Number(this.$route.params.projectId)
    this.projectId = 0
    this.getRelationNames(this.projectId)
    this.source = this.relationQueryQues.sourceName
    this.target = this.relationQueryQues.targetName
    this.relation = this.relationQueryQues.relName
    if (!this.relationQueryGraphData) {
      return
    } else {
      this.renderGraph()
    }
  },
  computed: {
    ...mapGetters([
      'relationQueryQues',
      'relationQueryGraphData',
      'relationNames',
    ]),
  },
  watch: {
    projectId(id) {
      this.projectInfo.id = id
    },
  },
  methods: {
    ...mapMutations(['setRelationQueryQues']),
    ...mapActions({createItemAct: 'createItem'}),
    ...mapActions(
      ['getProjectInfo', 'smartRelationQuery','smartValidPath','linkPrediction', 'getRelationNames']),
    renderGraph() {
      this.graphData = this.relationQueryGraphData
      const relationQueryBoard = this.$refs.relationQueryBoard
      relationQueryBoard.mountGraphData(this.graphData)
    },
    relationQuerySearch() {
      this.showTable = false
      const projectId = Number(this.$route.params.projectId)
      const relationQueryQues = {
        sourceName: this.source,
        targetName: this.target,
        relName: this.relation,
      }
      this.setRelationQueryQues(relationQueryQues)
      relationQueryQues.projectId = projectId
      if (relationQueryQues.relName===''&&relationQueryQues.sourceName!==''&&relationQueryQues.targetName!=='') {
         this.smartValidPath(relationQueryQues).then((res) => {
         
          if (res.links.length === 0) {
            // this.$message.warning('不存在有效路径！')
            console.log('11')
            this.linkPrediction(relationQueryQues).then((res) => {
              this.showTable = true
              this.tableData = res
              console.log(this.tableData)
              // this.renderTable()
            })
          } else {//nm无r；存在直接关系，仍在这里调用展示
            this.renderGraph()
        }})
      } else {
        this.smartRelationQuery(relationQueryQues).then((res) => {
        if (res.nodes.length === 0) {
          this.$message.warning('查无结果！')
        } else {//nm无r；存在直接关系，仍在这里调用展示
          this.renderGraph()
        }
        
      })
      }
      
    },
    handleCheck(row) {
      // console.log("11111111")
      this.dialogVisible = true
      this.form = row
      // console.log("11111111",this.form)

    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    validate() {
      return new Promise(resolve => {
        this.$refs.form.validate(res => {
          resolve(res)
        })
      })
    },
    submit(form) {
      this.$confirm('将为两节点添加关系，是否确认？')
        .then(_ => {
          // const projectId = Number(this.$route.params.projectId)
          const projectId = 0
          this.dialogVisible = false 
          var item = {}
          item.from = form.nodeIdP1
          item.to = form.nodeIdP2
          item.name = form.name
          item.value = form.width
          console.log(projectId)
          var type = this.type
          var copySign = this.copySign
          // console.log(type)
          console.log(item)
          // console.log(copySign)
          this.createItemAct({projectId, type, item, copySign}).then(item => {
            console.log(item)
            this.tableData = item})
          this.isCheck = true
          done();
        })
        .catch(_ => {
          
        });
    }
  },
}
</script>

<style>
.relationq {
  height: 100%
}
.relationq > .ask {
  text-align: left;
  border: 1px solid #DCDFE6;
  margin-bottom: 20px;
}
.relationq .header {
  display: flex;
  align-items: center;
  height: 40px;
  background-color: #f6f8fa;
  font-size: small;
  padding: 0 10px;
}

.relationq > .ask > .input {
  padding: 10px;
}

.relationq > .graph {
  height: 80%;
  border: 1px solid #DCDFE6;
  margin-bottom: 10px;
}
.relationq > .graph > .show{
  height: 94%;
  
}
.relationq > .ask > .input > .el-button {
  float: right;
  padding: 10px 14px;
  height: 40px;
}


</style>
